<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <link rel="StyleSheet" href="css/mypetstore.css" type="text/css" media="screen"/>

</head>
<body>
    <div th:include="common/top :: #Header"></div>

    <div id="Content">
        <div id="BackLink">
            <a href="/mainForm">Return to Main Menu</a>
        </div>

        <div id="Catalog">

            <div id="Cart">

                <h2>Shopping Cart</h2>
                <form action="/updateCart" method="post" id="cartForm">
                    <table>
                        <tr>
                            <th><b>Item ID</b></th>
                            <th><b>Product ID</b></th>
                            <th><b>Description</b></th>
                            <th><b>In Stock?</b></th>
                            <th><b>Quantity</b></th>
                            <th><b>List Price</b></th>
                            <th><b>Total Cost</b></th>
                            <th>&nbsp;</th>
                        </tr>

                        <tr th:if="${cart.numberOfItems == 0}">
                            <td colspan="8"><b>Your cart is empty.</b></td>
                        </tr>

                        <tr th:each="cartItem:${cart.itemList}">
                            <td>
                                <a th:href="@{/itemForm?itemId=cartItem.item.itemId}" th:text="${cartItem.item.itemId}"></a>
                            </td>
                            <td th:text="${cartItem.item.product.productId}"></td>
                            <td>
                                <text th:text="${cartItem.item.attribute1}"></text>
                                <text th:text="${cartItem.item.attribute2}"></text>
                                <text th:text="${cartItem.item.attribute3}"></text>
                                <text th:text="${cartItem.item.attribute4}"></text>
                                <text th:text="${cartItem.item.attribute5}"></text>
                                <text th:text="${cartItem.item.product.name}"></text>
                            </td>
                            <td th:text="${cartItem.inStock}"></td>


                            <td><input type="text" th:name="${cartItem.item.itemId}" th:value="${cartItem.quantity}"
                                       class="quantity-field"/></td>


                            <td th:text="'$'+${#numbers.formatDecimal(cartItem.item.quantity,0,'COMMA',2,'POINT')}"></td>
                            <td th:text="'$'+${#numbers.formatDecimal(cartItem.total,0,'COMMA',2,'POINT')}"></td>

                            <td>
                                <a class="green-button" th:href="@{/removeItemFromCart(itemId=${cartItem.item.itemId})}">Remove</a>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="7" >
                                <text th:text="'Sub Total:$'+${#numbers.formatDecimal(cart.subTotal,0,'COMMA',2,'POINT')}"></text>
                                <input type="submit" name="updateCartQuantities" value="Update Cart" /></td>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                </form>

                <a th:if="${cart.numberOfItems > 0}" href="/newOrderForm" class="green-button"  id="showModalBtn">Proceed to Checkout</a>
            </div>

            <div id="MyList">
<!--                <c:if test="${sessionScope.account != null}">-->
<!--                    <c:if test="${sessionScope.account.isListOption()}">-->
<!--                        <%@ include file="IncludeMyList.jsp" %>-->
<!--                    </c:if>-->
<!--                </c:if>-->
            </div>

            <div id="customModal">
                <div id="modalContent"></div>
            </div>

            <div id="customModal1">
                <div id="modalContent1"></div>
                <%--        <span id="closeModalBtn1">&times;</span>--%>
            </div>

            <div id="customModal2">
                <div id="modalContent2"></div>
                <span id="closeModalBtn2">&times;</span>
            </div>


            <div id="Separator">&nbsp;</div>
        </div>
    </div>

    <div th:include="common/bottom ::#Footer"></div>
</body>
</html>